<template>
	<view>
		<uni-nav-bar statusBar :fixed="true"  @clickLeft="clickLeft"  @clickRight="clickRight"  titleSize="34rpx" rightText="全部已读" :height="50" left-icon="left" title="关于我们" />
		<view class="flexdig">
			<view class=" zuywe">
				<view class="flexdig pgusue" @click="TabbarIndex = index" v-for="(item,index) in TabbarList" :key="item.id">
					<label :class="index == TabbarIndex?'zuisea':''">{{item.title}}</label>
					<view class="dot" v-if="index==0 "></view>
				</view>
			</view>
			
			<view class="content" >
				<view :class="['msgItem',item.isNew ?'bgColor':'']" v-for="(item,index) in msgList"  @click="itemClick(item,index)">
					<image class="success" src="../../static/img48.png" mode="widthFix"></image>
					<view class="labelView" >
						<label class="msg">{{item.coin_name}}: {{item.money}} 转账成功</label>
						<label class="addr" v-if="item.type ==1">发送地址: {{item.inAddr}}</label>
						<label class="addr" v-if="item.type ==2">收款地址: {{item.outAddr}}</label>
					</view>
					<view class="time">{{item.create_time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabbarIndex: 0,
				TabbarList: [
					{id:0,title: '转账通知'},
					{id:1,title: '系统通知'}
				],
				msgList:this.$store.state.msgList
			}
		},
		onLoad() {
			this.setmsgList()
		},
		methods: {
			// 返回
			clickLeft(){
				this.Api.back()
			},
			clickRight(){
				
				for(let item of this.msgList){
					item.isNew=false
				}
				this.$store.commit("setMsgList",this.msgList);
				uni.setStorageSync("msgList",this.msgList)
				uni.$emit("setHotDot")
			},
			itemClick(item,i){
				this.msgList[i].isNew =false;
				this.$store.commit("setMsgList",this.msgList);
				uni.setStorageSync("msgList",this.msgList)
				uni.$emit("setHotDot")
				this.Api.go_to("/pages/xiangqing/xiangqing?item=" +JSON.stringify(item))
			},
			
	
			setmsgList(){
				for (let item of this.msgList) {
				
					item.inAddr = item.tra_en_address.substring(0, 6) + '...' + item.tra_en_address.substring(
						item.tra_en_address.length - 6, item.tra_en_address.length)
				
					item.outAddr = item.tra_out_address.substring(0, 6) + '...' + item.tra_out_address.substring(
						item.tra_out_address.length - 6, item.tra_out_address.length)
				
					item.money = parseInt(item.money)
				}
			}
		
		}
	}
</script>

<style scoped>
.flexdig{
		display: flex;
		flex-direction: column;
	}
	.zuywe{
		    width: 100%;
		    align-items: center;
		    height: 64rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		    border-bottom: 1rpx solid #efefef;
	}
	.pgusue{
		   display: flex;
		 width: 50%;
		position: relative;
		align-items: center;
		 justify-content: center;
	}
	.zuisea{
			width: 150rpx;
			text-align: center;
		    border-bottom: 2rpx solid;
	}
	.content{
		width: 100%;
		height: calc(100vh - 164rpx);
		
		overflow-y: auto;
	}
	.msgItem{
		width: 100%;
		display: flex;
		flex-direction: row;
		padding:40rpx 20rpx;
		box-sizing: border-box;
		border-bottom:0.5rpx #F0F0F0 solid ;
	}
	.success{
		width: 40rpx;
		margin-right: 20rpx;
	}
	.labelView{
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.msg{
		font-size: 25rpx;
	}
	.addr{
		font-size: 25rpx;
		margin-top: 20rpx;
		color: #D7D7D7;
	}
	.time{
		color: #D7D7D7;
		font-size: 20rpx;
	}
	.bgColor{
		background-color: #DFFCFF;
	}
	.dot{
		position: absolute;
		width: 15rpx;
		left: 0;
		top: 0;
		height: 15rpx;
		border-radius: 15rpx;
	}
</style>
